<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
    <!-- import JavaScript -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="../js/eui.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
</div>
</body>
<script type="text/javascript">
    /*

     */
    Vue.config.productionTip = false;
    let vm = new Vue({
        el:'#root',
        // template:`
        // <div>
        //    <h2>当前的n值是：{{n}}</h2>
        //    <button @click="add">点我n+1</button>
        // </div>
        // `,
        data:{
            n:1,
        },
        methods:{
            add(){
                this.n++;
            }
        },
        //Vue完成模板的解析并把真实DOM放入页面后（挂载完毕）调用mounted

        beforeCreate(){
            console.log('beforeCreated')
            console.log(this)
        },
        created() {
            console.log('Created')
            console.log(this)
        },
        beforeMount() {
            console.log('beforemount')
            console.log(this)
        },
        mounted(){
            console.log('monuted')
            console.log(this)
        },
        beforeUpdate() {
            console.log('beforeupdate')
            console.log(this)
        },
        updated() {
            console.log('updated')
            console.log(this)
        },
        beforeDestroy(){
            console.log('beforeDestroy')
            console.log(this)
        },
        destroyed() {
            console.log('destroyed')
            console.log(this)
        }
    })
</script>
</html>